<template>
  <el-dialog
    v-model="show"
    :title="seatCode + '频率设置'"
    width="400px"
    destroy-on-close
    draggable
  >
    <div v-loading="loading">
      <!-- <el-form v-if="0">
          <el-form-item label="当前">
            <el-input
              :value="frequency + ' Mhz'"
              disabled
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="修改">
            <el-select v-model="frequencySelected" style="width: 100%">
              <el-option-group>
                <el-option
                  v-for="f in preset"
                  :label="f.value + ' Mhz'"
                  :value="f.value"
                >
                  <span style="float: left">{{ f.value }}&nbsp;Mhz</span>
                  <span
                    style="float: right; color: var(--el-text-color-secondary)"
                    >{{ f.label }}</span
                  >
                </el-option>
              </el-option-group>
              <el-option-group>
                <el-option label="其他" :value="-1"></el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item> </el-form-item>
          <el-form-item label="其他" v-if="frequencySelected == -1">
            <el-input v-model="frequencyInputed" type="number"></el-input>
          </el-form-item>
        </el-form> -->
      <el-cascader-panel :options="options" v-model="frequencySelected">
        <template #default="{ node, data }">
          <div v-if="!node.isLeaf">
            <span>{{ data.label }}</span>
            <span>（{{ data.children.length }}）</span>
          </div>
          <div v-else>
            <div v-if="data.value == -1">{{ data.label }}</div>
            <div v-else>
              <span style="float: left">{{ data.value }}&nbsp;Mhz</span>
              <span
                style="float: right; color: var(--el-text-color-secondary)"
                >{{ data.label }}</span
              >
            </div>
          </div>
        </template>
      </el-cascader-panel>
      <div
        v-if="frequencySelected == -1"
        style="
          padding-top: 24px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <span style="min-width: 120px; text-align: center"
          >请输入其他频率：</span
        >
        <el-input v-model="frequencyInputed" type="number"></el-input>
        <span style="min-width: 50px; text-align: center">Mhz</span>
      </div>
      <div style="text-align: center; padding-top: 24px" v-if="isChanged">
        <el-button type="primary" @click="save"
          >保存{{ seatCode }}频率为：{{ frequencyNew }}&nbsp;Mhz</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import axios from "axios";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const seatCode = ref("");
const frequency = ref(0);
const frequencySelected = ref(0);
const frequencyInputed = ref(0);

const frequencyNew = computed(() =>
  frequencySelected.value != -1 && frequencySelected.value.length == 2
    ? frequencySelected.value[1]
    : parseFloat(frequencyInputed.value)
);

const isChanged = computed(() => frequencyNew.value != frequency.value);

const options = ref([
  {
    value: 0,
    label: "区管一室",
    children: [
      { value: 128.35, label: "04#" },
      { value: 123.7, label: "05#" },
      { value: 132.3, label: "09#" },
      { value: 127.55, label: "11#" },
      { value: 132.675, label: "12#" },
      { value: 124.575, label: "15#" },
      { value: 119.325, label: "16#" },
      { value: 133.3, label: "备频" },
      { value: 134.05, label: "备频" },
    ],
  },
  {
    value: 0,
    label: "区管二室",
    children: [
      { value: 122.8, label: "02#" },
      { value: 118.95, label: "08#" },
      { value: 132.475, label: "17#" },
      { value: 133.125, label: "18#" },
      { value: 133.8, label: "03#" },
      { value: 133.0, label: "25#" },
      { value: 126.15, label: "备频" },
      { value: 134.45, label: "备频" },
    ],
  },
  {
    value: 0,
    label: "区管三室",
    children: [
      { value: 120.9, label: "01#" },
      { value: 125.7, label: "10#" },
      { value: 132.125, label: "13#" },
      { value: 123.775, label: "20#" },
      { value: 120.525, label: "备频" },
    ],
  },
  {
    value: 0,
    label: "区管四室",
    children: [
      { value: 132.25, label: "21#" },
      { value: 133.65, label: "22#" },
      { value: 124.95, label: "23#" },
      { value: 133.225, label: "24#" },
      { value: 134.225, label: "26#" },
      { value: 134.75, label: "备频" },
      { value: 133.45, label: "备频" },
    ],
  },
  // {
  //   value: 0,
  //   label: "???",
  //   children: [
  //     { value: 111, label: "24#" },
  //     { value: 111, label: "备频" },
  //   ],
  // },
  {
    value: -1,
    label: "其他",
  },
]);

const show = ref(false);

const open = (seat) => {
  seatCode.value = seat.seatName;
  frequency.value = seat.frequency;
  frequencySelected.value = seat.frequency;
  frequencyInputed.value = seat.frequency;
  show.value = true;
};

const loading = ref(false);

import setSeatAttrib from "@/views/SeatStatus/common/setSeatAttrib.js";
const save = () => {
  loading.value = true;
  setSeatAttrib(seatCode.value, "frequency", frequencyNew.value)
    .then(() => {
      seatStore
        .getSeatStatus()
        .then(() => {
          loading.value = false;
          show.value = false;
        })
        .catch(() => {
          loading.value = false;
          show.value = false;
        });
    })
    .catch(() => {
      loading.value = false;
      show.value = false;
    });
  return null;
};
defineExpose({ open });
</script>
